ರಿಯಾಕ್ಟ್‌ನ `experimental_useFormStatus` ಬಳಸಿ ಫಾರ್ಮ್ ವ್ಯಾಲಿಡೇಶನ್‌ನಲ್ಲಿ ಪರಿಣತಿ

ವೆಬ್ ಸಂವಹನದ ಅಡಿಪಾಯವೇ ಫಾರ್ಮ್‌ಗಳು. ಒಂದು ಸರಳ ಸುದ್ದಿಪತ್ರ ಸೈನ್-ಅಪ್‌ನಿಂದ ಹಿಡಿದು ಸಂಕೀರ್ಣ ಬಹು-ಹಂತದ ಆರ್ಥಿಕ ಅಪ್ಲಿಕೇಶನ್‌ವರೆಗೆ, ಬಳಕೆದಾರರು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ಪ್ರಾಥಮಿಕ ಮಾಧ್ಯಮವೇ ಅವು. ಆದರೂ, ವರ್ಷಗಳಿಂದ, ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಸಂಕೀರ್ಣತೆ, ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಮತ್ತು ಡಿಪೆಂಡೆನ್ಸಿ ಆಯಾಸದ ಮೂಲವಾಗಿದೆ. ನಾವು ಕಂಟ್ರೋಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸಿದ್ದೇವೆ, ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಹೋರಾಡಿದ್ದೇವೆ, ಮತ್ತು ಅಸಂಖ್ಯಾತ `onChange` ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬರೆದಿದ್ದೇವೆ, ಎಲ್ಲವೂ ಬಳಕೆದಾರರಿಗೆ ಸುಗಮ ಮತ್ತು ಸಹಜ ಅನುಭವವನ್ನು ನೀಡುವ ಗುರಿಯೊಂದಿಗೆ.

ರಿಯಾಕ್ಟ್ ತಂಡವು ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಈ ಮೂಲಭೂತ ಅಂಶವನ್ನು ಪುನರ್‌ಪರಿಶೀಲಿಸುತ್ತಿದೆ, ಇದು ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕೃತವಾದ ಹೊಸ, ಶಕ್ತಿಯುತ ಮಾದರಿಯ ಪರಿಚಯಕ್ಕೆ ಕಾರಣವಾಗಿದೆ. ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯ ತತ್ವಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಈ ಹೊಸ ಮಾದರಿಯು, ತರ್ಕವನ್ನು ಅದರ ಸರಿಯಾದ ಸ್ಥಳಕ್ಕೆ ಅಂದರೆ ಸರ್ವರ್‌ಗೆ ಹತ್ತಿರಕ್ಕೆ ಸರಿಸುವ ಮೂಲಕ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿದೆ. ಈ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕ್ರಾಂತಿಯ ಹೃದಯಭಾಗದಲ್ಲಿ ಎರಡು ಹೊಸ ಪ್ರಾಯೋಗಿಕ ಹುಕ್‌ಗಳಿವೆ: `useFormState` ಮತ್ತು ನಮ್ಮ ಇಂದಿನ ಚರ್ಚೆಯ ಕೇಂದ್ರಬಿಂದು, `experimental_useFormStatus`.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು `experimental_useFormStatus` ಹುಕ್‌ನ ಆಳವಾದ ಅಧ್ಯಯನಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ. ನಾವು ಕೇವಲ ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ನೋಡುವುದಿಲ್ಲ; ಅದು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮಾನಸಿಕ ಮಾದರಿಯನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ: ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್ ತರ್ಕ. ಈ ಹುಕ್ ಯುಐ (UI) ಅನ್ನು ಫಾರ್ಮ್ ಸ್ಟೇಟ್‌ನಿಂದ ಹೇಗೆ ಬೇರ್ಪಡಿಸುತ್ತದೆ, ಪೆಂಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳ ನಿರ್ವಹಣೆಯನ್ನು ಹೇಗೆ ಸರಳಗೊಳಿಸುತ್ತದೆ, ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಸೇರಿ ಹೇಗೆ ದೃಢವಾದ, ಪ್ರವೇಶಸಾಧ್ಯವಾದ, ಮತ್ತು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಫಾರ್ಮ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ಅದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡ್ ಆಗುವ ಮೊದಲೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೀವು ಕಲಿಯುವಿರಿ. ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಬಗ್ಗೆ ನಿಮಗೆ ತಿಳಿದಿದೆ ಎಂದು ನೀವು ಭಾವಿಸಿದ್ದ ಎಲ್ಲವನ್ನೂ ಮರುಚಿಂತನೆ ಮಾಡಲು ಸಿದ್ಧರಾಗಿ.

ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆ: ರಿಯಾಕ್ಟ್ ಫಾರ್ಮ್‌ಗಳ ವಿಕಾಸ

`useFormStatus` ತರುವ ನಾವೀನ್ಯತೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಶಂಸಿಸಲು, ನಾವು ಮೊದಲು ರಿಯಾಕ್ಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಯ ಪ್ರಯಾಣವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ಈ ಸಂದರ್ಭವು ಈ ಹೊಸ ವಿಧಾನವು ಸೊಗಸಾಗಿ ಪರಿಹರಿಸುವ ಸಮಸ್ಯೆಗಳನ್ನು ಎತ್ತಿ ತೋರಿಸುತ್ತದೆ.

ಹಳೆಯ ವಿಧಾನ: ಕಂಟ್ರೋಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳು

ವರ್ಷಗಳ ಕಾಲ, ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳಿಗೆ ಪ್ರಮಾಣಿತ ವಿಧಾನವೆಂದರೆ ಕಂಟ್ರೋಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಮಾದರಿ. ಇದರಲ್ಲಿ ಇವು ಸೇರಿವೆ:

• ಪ್ರತಿ ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್‌ನ ಮೌಲ್ಯವನ್ನು ಹಿಡಿದಿಡಲು ರಿಯಾಕ್ಟ್ ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಬಳಸುವುದು (ಉದಾ., `useState` ನಿಂದ).
• ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್‌ನಲ್ಲಿ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು `onChange` ಹ್ಯಾಂಡ್ಲರ್ ಬರೆಯುವುದು.
• ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಇನ್‌ಪುಟ್‌ನ `value` ಪ್ರಾಪ್‌ಗೆ ಹಿಂತಿರುಗಿಸುವುದು.

ಇದು ರಿಯಾಕ್ಟ್‌ಗೆ ಫಾರ್ಮ್‌ನ ಸ್ಟೇಟ್‌ನ ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಇದು ಗಮನಾರ್ಹವಾದ ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಅನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ಹತ್ತು ಫೀಲ್ಡ್‌ಗಳಿರುವ ಫಾರ್ಮ್‌ಗೆ, ನಿಮಗೆ ಹತ್ತು ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಹತ್ತು ಹ್ಯಾಂಡ್ಲರ್ ಫಂಕ್ಷನ್‌ಗಳು ಬೇಕಾಗಬಹುದು. ವ್ಯಾಲಿಡೇಶನ್, ಎರರ್ ಸ್ಟೇಟ್‌ಗಳು, ಮತ್ತು ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು ಇನ್ನೂ ಹೆಚ್ಚಿನ ಸಂಕೀರ್ಣತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳನ್ನು ಸಂಕೀರ್ಣವಾದ ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಥವಾ ಸಮಗ್ರ ಥರ್ಡ್-ಪಾರ್ಟಿ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಲು ಪ್ರೇರೇಪಿಸುತ್ತದೆ.

Formik ಮತ್ತು React Hook Form ನಂತಹ ಲೈಬ್ರರಿಗಳು ಈ ಸಂಕೀರ್ಣತೆಯನ್ನು ಅಮೂರ್ತಗೊಳಿಸುವ ಮೂಲಕ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಪಡೆದವು. ಅವು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್, ವ್ಯಾಲಿಡೇಶನ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಅದ್ಭುತ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಅವು ನಿರ್ವಹಿಸಲು ಮತ್ತೊಂದು ಡಿಪೆಂಡೆನ್ಸಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ ಮತ್ತು ಆಗಾಗ್ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಇದು ಫ್ರಂಟ್ಎಂಡ್ ಮತ್ತು ಬ್ಯಾಕೆಂಡ್ ನಡುವೆ ನಕಲಿ ವ್ಯಾಲಿಡೇಶನ್ ತರ್ಕಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.

ಹೊಸ ಯುಗ: ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು

ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳು ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತವೆ. ಇದರ ಮೂಲಭೂತ ಕಲ್ಪನೆಯು ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಅಡಿಪಾಯದ ಮೇಲೆ ನಿರ್ಮಿಸುವುದಾಗಿದೆ: ಪ್ರಮಾಣಿತ HTML `

` ಎಲಿಮೆಂಟ್. ಸರ್ವರ್ ಆಕ್ಷನ್ ಹೊಂದಿರುವ ಫಾರ್ಮ್ ಕ್ಲಾಸಿಕ್ HTML ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಫಲವಾದರೆ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಂಡಿದ್ದರೂ ಸಹ ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದೇ ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯ ಸಾರ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡ್ ಆದಾಗ, ರಿಯಾಕ್ಟ್ ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹೈಜಾಕ್ ಮಾಡುತ್ತದೆ, ಪೂರ್ಣ-ಪುಟದ ರಿಲೋಡ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಅಸಮಕಾಲಿಕವಾಗಿ ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ಇದು ನಮಗೆ ಎರಡೂ ಲೋಕಗಳ ಅತ್ಯುತ್ತಮವಾದದ್ದನ್ನು ನೀಡುತ್ತದೆ: ಸರ್ವರ್-ರೆಂಡರ್ಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವ ಮತ್ತು ಸಿಂಗಲ್-ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್ (SPA) ನ ಸಮೃದ್ಧ, ಸಂವಾದಾತ್ಮಕ ಅನುಭವ.

ಈ ಮಾದರಿಯು ವ್ಯಾಪಾರ ತರ್ಕ ಮತ್ತು ವ್ಯಾಲಿಡೇಶನ್‌ಗಾಗಿ ಸತ್ಯದ ಮೂಲವನ್ನು ಸರ್ವರ್‌ಗೆ (ಅಥವಾ ಸರ್ವರ್-ರೀತಿಯ ಪರಿಸರಕ್ಕೆ) ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕೋಡ್ ಸರಳವಾಗುತ್ತದೆ, ಪ್ರಾಥಮಿಕವಾಗಿ ಆ ಸರ್ವರ್ ಸಂವಹನದ *ಸ್ಥಿತಿಯ* ಆಧಾರದ ಮೇಲೆ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದರ ಬಗ್ಗೆ ಕಾಳಜಿ ವಹಿಸುತ್ತದೆ. ಇದೇ ಸ್ಥಳದಲ್ಲಿ `useFormStatus` ಕಾರ್ಯರೂಪಕ್ಕೆ ಬರುತ್ತದೆ.

ತೆರೆಯ ಮರೆಯಲ್ಲಿ: `experimental_useFormStatus` ಎಂದರೇನು?

`experimental_useFormStatus` ಹುಕ್ ಒಂದು ಪೇರೆಂಟ್ `` ಎಲಿಮೆಂಟ್‌ನ ಕೊನೆಯ ಸಲ್ಲಿಕೆಯ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸಾಧನವಾಗಿದೆ. ಇದು ಕೇವಲ ಓದಲು-ಮಾತ್ರವಿರುವ (read-only) ಹುಕ್ ಆಗಿದ್ದು, ಯಾವುದೇ ಪ್ರಾಪ್ಸ್ ರವಾನೆಯ ಅಗತ್ಯವಿಲ್ಲದೆ ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ತಿಳಿಯಬೇಕಾದ ಎಲ್ಲವನ್ನೂ ಹೇಳುತ್ತದೆ.

ಕೋರ್ ಕಾರ್ಯಚಟುವಟಿಕೆ

ದೊಡ್ಡ ಫಾರ್ಮ್‌ನೊಳಗಿನ ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯಾಗುತ್ತಿರುವಾಗ ಈ ಬಟನ್‌ಗೆ ಹೇಗೆ ತಿಳಿಯುತ್ತದೆ? ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ನೀವು `isSubmitting` ನಂತಹ ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಅನೇಕ ಹಂತಗಳ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಮೂಲಕ ರವಾನಿಸಬೇಕಾಗಿತ್ತು (ಪ್ರಾಪ್ ಡ್ರಿಲ್ಲಿಂಗ್). `useFormStatus` ನೊಂದಿಗೆ, ಬಟನ್ ಕಾಂಪೊನೆಂಟ್ ಈ ಮಾಹಿತಿಯನ್ನು ತಾನಾಗಿಯೇ ಕಂಡುಕೊಳ್ಳಬಹುದು.

ಈ ಹುಕ್ ಅನ್ನು `` ಎಲಿಮೆಂಟ್‌ನ *ಒಳಗೆ* ರೆಂಡರ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಕರೆಯಬೇಕು. ನಂತರ ಅದು ಆ ನಿರ್ದಿಷ್ಟ ಫಾರ್ಮ್‌ನ ಜೀವನಚಕ್ರದ ಬಗ್ಗೆ ಸ್ಥಿತಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

`useFormStatus` ಹುಕ್‌ನ ಅಂಗರಚನೆ

ನೀವು `const status = useFormStatus()` ಎಂದು ಕರೆದಾಗ, ನಿಮಗೆ ಈ ಕೆಳಗಿನ ಪ್ರಮುಖ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಹಿಂತಿರುಗುತ್ತದೆ:

• `pending` (boolean): ಇದು ಅತಿ ಹೆಚ್ಚು ಬಳಸಲಾಗುವ ಪ್ರಾಪರ್ಟಿ. ಪೇರೆಂಟ್ ಫಾರ್ಮ್ ಪ್ರಸ್ತುತ ಸಲ್ಲಿಕೆಯಾಗುತ್ತಿದ್ದರೆ ಇದು `true` ಆಗಿರುತ್ತದೆ ಮತ್ತು ಇಲ್ಲದಿದ್ದರೆ `false` ಆಗಿರುತ್ತದೆ. ಬಟನ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು, ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್‌ಗಳನ್ನು ತೋರಿಸಲು, ಅಥವಾ ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಇದು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
• `data` (FormData): `FormData` ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಒಂದು ಆಬ್ಜೆಕ್ಟ್. ಇದು ಫಾರ್ಮ್‌ನೊಂದಿಗೆ ಸಲ್ಲಿಸಲಾದ ಡೇಟಾವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಆಶಾವಾದಿ UI ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಇದು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದೆ - ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ತಮ್ಮ ಕಾಮೆಂಟ್ ಅನ್ನು ಸಲ್ಲಿಸಿದ ತಕ್ಷಣವೇ ಅದನ್ನು ಪಟ್ಟಿಯಲ್ಲಿ ತೋರಿಸುವುದು, ಸರ್ವರ್ ಅದರ ರಚನೆಯನ್ನು ದೃಢೀಕರಿಸುವ ಮೊದಲೇ.
• `method` (string): ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಾಗಿ ಬಳಸಿದ HTTP ವಿಧಾನ ('get' ಅಥವಾ 'post').
• `action` (function): ಸಲ್ಲಿಕೆಯ ಸಮಯದಲ್ಲಿ ಆಹ್ವಾನಿಸಲಾದ ಸರ್ವರ್ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್‌ಗೆ ಒಂದು ಉಲ್ಲೇಖ.

ಸುವರ್ಣ ನಿಯಮ: `` ನ ಒಂದು ಚೈಲ್ಡ್

ನೆನಪಿಡಬೇಕಾದ ಒಂದು ನಿರ್ಣಾಯಕ ನಿಯಮವೆಂದರೆ `useFormStatus` ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್ ಅದು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತಿರುವ `` ಎಲಿಮೆಂಟ್‌ನ ಚೈಲ್ಡ್ ಆಗಿ ರೆಂಡರ್ ಆಗಬೇಕು. ಇದು `` ಟ್ಯಾಗ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವ ಅದೇ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಇರಬಾರದು, ಏಕೆಂದರೆ ಅದಕ್ಕೆ ಫಾರ್ಮ್‌ನ ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವ ಅಗತ್ಯವಿದೆ. ಇದಕ್ಕಾಗಿಯೇ ನೀವು `useFormStatus` ತರ್ಕವನ್ನು ಇರಿಸಲು `` ನಂತಹ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಹುತೇಕ ಯಾವಾಗಲೂ ಪ್ರತ್ಯೇಕವಾಗಿ ರಚಿಸುವುದನ್ನು ನೋಡುತ್ತೀರಿ.

ಒಂದು ಸರಳ ಉದಾಹರಣೆ: ಸ್ಮಾರ್ಟ್ ಸಬ್ಮಿಟ್ ಬಟನ್

ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಬಳಕೆಯ ಪ್ರಕರಣವನ್ನು ನೋಡೋಣ. ಸಾಮಾನ್ಯ `` ಬದಲಿಗೆ, ನಾವು ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ತಿಳಿದಿರುವ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.

ಫೈಲ್: SubmitButton.js

import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return (

{pending ? 'Submitting...' : 'Sign Up'} ); }

ಫೈಲ್: SignUpForm.js

import { SubmitButton } from './SubmitButton'; import { signUpAction } from './actions'; // ಒಂದು ಸರ್ವರ್ ಆಕ್ಷನ್ export function SignUpForm() { return ( Email:
); }

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `SubmitButton` ಸಂಪೂರ್ಣವಾಗಿ ಸ್ವಯಂಪೂರ್ಣವಾಗಿದೆ. ಇದು ಯಾವುದೇ ಪ್ರಾಪ್ಸ್ ಅನ್ನು ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ. `SignUpForm` ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿಯಲ್ಲಿದ್ದಾಗ ತಿಳಿಯಲು ಇದು `useFormStatus` ಅನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತನ್ನನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ತನ್ನ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಇದು ಡಿಕಪ್ಲಿಂಗ್ ಮಾಡಲು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಫಾರ್ಮ್-ಅರಿವುಳ್ಳ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಮಾದರಿಯಾಗಿದೆ.

ವಿಷಯದ ತಿರುಳು: ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್ ತರ್ಕ

ಈಗ ನಾವು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗೆ ಬರುತ್ತೇವೆ. `useFormStatus` ಕೇವಲ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಅಲ್ಲ; ಇದು ವ್ಯಾಲಿಡೇಶನ್ ಬಗ್ಗೆ ವಿಭಿನ್ನವಾಗಿ ಯೋಚಿಸುವ ವಿಧಾನಕ್ಕೆ ಪ್ರಮುಖ ಸಕ್ರಿಯಕಾರಕವಾಗಿದೆ.

"ಸ್ಟೇಟಸ್ ವ್ಯಾಲಿಡೇಶನ್" ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್ ಎನ್ನುವುದು ಒಂದು ಮಾದರಿಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಪ್ರಯತ್ನಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಬಳಕೆದಾರರಿಗೆ ವ್ಯಾಲಿಡೇಶನ್ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪ್ರಾಥಮಿಕವಾಗಿ ನೀಡಲಾಗುತ್ತದೆ. ಪ್ರತಿ ಕೀಸ್ಟ್ರೋಕ್‌ನಲ್ಲಿ (`onChange`) ಅಥವಾ ಬಳಕೆದಾರರು ಫೀಲ್ಡ್ ಅನ್ನು ತೊರೆದಾಗ (`onBlur`) ವ್ಯಾಲಿಡೇಟ್ ಮಾಡುವ ಬದಲು, ಬಳಕೆದಾರರು ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಿದಾಗ ಪ್ರಾಥಮಿಕ ವ್ಯಾಲಿಡೇಶನ್ ತರ್ಕವು ಚಲಿಸುತ್ತದೆ. ಈ ಸಲ್ಲಿಕೆಯ ಫಲಿತಾಂಶ - ಅದರ *ಸ್ಥಿತಿ* (ಉದಾ., ಯಶಸ್ಸು, ವ್ಯಾಲಿಡೇಶನ್ ದೋಷ, ಸರ್ವರ್ ದೋಷ) - ನಂತರ UI ಅನ್ನು ನವೀಕರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

ಈ ವಿಧಾನವು ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಆಕ್ಷನ್‌ಗಳೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಸರ್ವರ್ ಆಕ್ಷನ್ ವ್ಯಾಲಿಡೇಶನ್‌ಗಾಗಿ ಸತ್ಯದ ಏಕೈಕ ಮೂಲವಾಗುತ್ತದೆ. ಇದು ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಅದನ್ನು ನಿಮ್ಮ ವ್ಯವಹಾರ ನಿಯಮಗಳ ವಿರುದ್ಧ ಮೌಲ್ಯೀಕರಿಸುತ್ತದೆ (ಉದಾ., "ಈ ಇಮೇಲ್ ಈಗಾಗಲೇ ಬಳಕೆಯಲ್ಲಿದೆಯೇ?"), ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಸೂಚಿಸುವ ಒಂದು ರಚನಾತ್ಮಕ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಅದರ ಪಾಲುದಾರನ ಪಾತ್ರ: `experimental_useFormState`

`useFormStatus` ನಮಗೆ *ಏನು* ನಡೆಯುತ್ತಿದೆ (ಪೆಂಡಿಂಗ್) ಎಂದು ಹೇಳುತ್ತದೆ, ಆದರೆ ಏನಾಯಿತು ಎಂಬುದರ *ಫಲಿತಾಂಶವನ್ನು* ಅದು ಹೇಳುವುದಿಲ್ಲ. ಅದಕ್ಕಾಗಿ, ನಮಗೆ ಅದರ ಸಹೋದರ ಹುಕ್ ಬೇಕು: `experimental_useFormState`.

`useFormState` ಒಂದು ಫಾರ್ಮ್ ಆಕ್ಷನ್‌ನ ಫಲಿತಾಂಶದ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೇಟ್ ಅನ್ನು ನವೀಕರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಹುಕ್ ಆಗಿದೆ. ಇದು ಆಕ್ಷನ್ ಫಂಕ್ಷನ್ ಮತ್ತು ಆರಂಭಿಕ ಸ್ಟೇಟ್ ಅನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳಾಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಹೊಸ ಸ್ಟೇಟ್ ಹಾಗೂ ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗೆ ರವಾನಿಸಲು ಒಂದು ಸುತ್ತುವರಿದ ಆಕ್ಷನ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

const [state, formAction] = useFormState(myAction, initialState);

• `state`: ಇದು `myAction` ನ ಕೊನೆಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯಿಂದ ಹಿಂತಿರುಗಿದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇಲ್ಲಿಂದ ನಾವು ನಮ್ಮ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪಡೆಯುತ್ತೇವೆ.
• `formAction`: ಇದು ನಿಮ್ಮ ಆಕ್ಷನ್‌ನ ಹೊಸ ಆವೃತ್ತಿಯಾಗಿದ್ದು, ಇದನ್ನು ನೀವು `
  ` ನ `action` ಪ್ರಾಪ್‌ಗೆ ರವಾನಿಸಬೇಕು. ಇದನ್ನು ಕರೆದಾಗ, ಇದು ಮೂಲ ಆಕ್ಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ ಮತ್ತು `state` ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ.

ಸಂಯೋಜಿತ ವರ್ಕ್‌ಫ್ಲೋ: ಕ್ಲಿಕ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯವರೆಗೆ

ಪೂರ್ಣ ವ್ಯಾಲಿಡೇಶನ್ ಲೂಪ್ ಅನ್ನು ರಚಿಸಲು `useFormState` ಮತ್ತು `useFormStatus` ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. ಆರಂಭಿಕ ರೆಂಡರ್: ಫಾರ್ಮ್ `useFormState` ಒದಗಿಸಿದ ಆರಂಭಿಕ ಸ್ಥಿತಿಯೊಂದಿಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಯಾವುದೇ ದೋಷಗಳನ್ನು ತೋರಿಸಲಾಗುವುದಿಲ್ಲ.
2. ಬಳಕೆದಾರರ ಸಲ್ಲಿಕೆ: ಬಳಕೆದಾರರು ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುತ್ತಾರೆ.
3. ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿ: ಸಬ್ಮಿಟ್ ಬಟನ್‌ನಲ್ಲಿರುವ `useFormStatus` ಹುಕ್ ತಕ್ಷಣವೇ `pending: true` ಎಂದು ವರದಿ ಮಾಡುತ್ತದೆ. ಬಟನ್ ನಿಷ್ಕ್ರಿಯಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಲೋಡಿಂಗ್ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ.
4. ಆಕ್ಷನ್ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ: ಸರ್ವರ್ ಆಕ್ಷನ್ (`useFormState` ನಿಂದ ಸುತ್ತುವರಿಯಲ್ಪಟ್ಟಿದೆ) ಫಾರ್ಮ್ ಡೇಟಾದೊಂದಿಗೆ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಇದು ವ್ಯಾಲಿಡೇಶನ್ ಮಾಡುತ್ತದೆ.
5. ಆಕ್ಷನ್ ರಿಟರ್ನ್ಸ್: ಆಕ್ಷನ್ ವ್ಯಾಲಿಡೇಶನ್‌ನಲ್ಲಿ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಒಂದು ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ:
   `{ message: "Validation failed", errors: { email: "This email is already taken." } }`
6. ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್: `useFormState` ಈ ರಿಟರ್ನ್ ಮೌಲ್ಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಅದರ `state` ವೇರಿಯೇಬಲ್ ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ. ಇದು ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್‌ನ ಮರು-ರೆಂಡರ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
7. UI ಪ್ರತಿಕ್ರಿಯೆ: ಫಾರ್ಮ್ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ. `useFormStatus` ನಿಂದ `pending` ಸ್ಥಿತಿಯು `false` ಆಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಈಗ `state.errors.email` ಅನ್ನು ಓದಬಹುದು ಮತ್ತು ಇಮೇಲ್ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ಪಕ್ಕದಲ್ಲಿ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.

ಈ ಸಂಪೂರ್ಣ ಹರಿವು ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟ, ಸರ್ವರ್-ಅಧಿಕೃತ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿ ಮತ್ತು ಫಲಿತಾಂಶದಿಂದ ಚಾಲಿತವಾಗಿದೆ.

ಪ್ರಾಯೋಗಿಕ ಮಾಸ್ಟರ್‌ಕ್ಲಾಸ್: ಬಹು-ಫೀಲ್ಡ್ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ನಿರ್ಮಿಸುವುದು

ಈ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಒಂದು ಸಂಪೂರ್ಣ, ಉತ್ಪಾದನಾ-ಶೈಲಿಯ ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ ದೃಢೀಕರಿಸೋಣ. ನಾವು ವ್ಯಾಲಿಡೇಶನ್‌ಗಾಗಿ ಸರ್ವರ್ ಆಕ್ಷನ್ ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು `useFormState` ಮತ್ತು `useFormStatus` ಎರಡನ್ನೂ ಬಳಸುತ್ತೇವೆ.

ಹಂತ 1: ವ್ಯಾಲಿಡೇಶನ್‌ನೊಂದಿಗೆ ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಮೊದಲಿಗೆ, ನಮಗೆ ನಮ್ಮ ಸರ್ವರ್ ಆಕ್ಷನ್ ಬೇಕು. ದೃಢವಾದ ವ್ಯಾಲಿಡೇಶನ್‌ಗಾಗಿ, ನಾವು ಜನಪ್ರಿಯ ಲೈಬ್ರರಿ Zod ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಈ ಆಕ್ಷನ್ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಇರುತ್ತದೆ, ನೀವು Next.js ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್ ಬಳಸುತ್ತಿದ್ದರೆ `'use server';` ನಿರ್ದೇಶನದೊಂದಿಗೆ ಗುರುತಿಸಲಾಗುತ್ತದೆ.

ಫೈಲ್: actions/authActions.js

'use server'; import { z } from 'zod'; // ವ್ಯಾಲಿಡೇಶನ್ ಸ್ಕೀಮಾವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ const registerSchema = z.object({ username: z.string().min(3, 'Username must be at least 3 characters long.'), email: z.string().email('Please enter a valid email address.'), password: z.string().min(8, 'Password must be at least 8 characters long.'), }); // ನಮ್ಮ ಫಾರ್ಮ್‌ಗಾಗಿ ಆರಂಭಿಕ ಸ್ಥಿತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ export const initialState = { message: '', errors: {}, }; export async function registerUser(prevState, formData) { // 1. ಫಾರ್ಮ್ ಡೇಟಾವನ್ನು ವ್ಯಾಲಿಡೇಟ್ ಮಾಡಿ const validatedFields = registerSchema.safeParse( Object.fromEntries(formData.entries()) ); // 2. ವ್ಯಾಲಿಡೇಶನ್ ವಿಫಲವಾದರೆ, ದೋಷಗಳನ್ನು ಹಿಂತಿರುಗಿಸಿ if (!validatedFields.success) { return { message: 'Validation failed. Please check the fields.', errors: validatedFields.error.flatten().fieldErrors, }; } // 3. (ಅನುಕರಿಸಿ) ಬಳಕೆದಾರರು ಈಗಾಗಲೇ ಡೇಟಾಬೇಸ್‌ನಲ್ಲಿದ್ದಾರೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ // ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ, ನೀವು ಇಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾಬೇಸ್ ಅನ್ನು ಪ್ರಶ್ನಿಸುತ್ತೀರಿ. if (validatedFields.data.email === 'user@example.com') { return { message: 'Registration failed.', errors: { email: ['This email is already registered.'] }, }; } // 4. (ಅನುಕರಿಸಿ) ಬಳಕೆದಾರರನ್ನು ರಚಿಸಿ console.log('Creating user:', validatedFields.data); // 5. ಯಶಸ್ಸಿನ ಸ್ಥಿತಿಯನ್ನು ಹಿಂತಿರುಗಿಸಿ // ನಿಜವಾದ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ, ನೀವು ಇಲ್ಲಿ 'next/navigation' ನಿಂದ `redirect()` ಬಳಸಿ ಮರುನಿರ್ದೇಶಿಸಬಹುದು return { message: 'User registered successfully!', errors: {}, }; }

ಈ ಸರ್ವರ್ ಆಕ್ಷನ್ ನಮ್ಮ ಫಾರ್ಮ್‌ನ ಮೆದುಳಾಗಿದೆ. ಇದು ಸ್ವಯಂಪೂರ್ಣ, ಸುರಕ್ಷಿತ, ಮತ್ತು ಯಶಸ್ಸು ಹಾಗೂ ದೋಷ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಸ್ಪಷ್ಟವಾದ ಡೇಟಾ ರಚನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಹಂತ 2: ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ, ಸ್ಟೇಟಸ್-ಅರಿವುಳ್ಳ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು

ನಮ್ಮ ಮುಖ್ಯ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಸ್ವಚ್ಛವಾಗಿಡಲು, ನಾವು ನಮ್ಮ ಇನ್‌ಪುಟ್‌ಗಳು ಮತ್ತು ಸಬ್ಮಿಟ್ ಬಟನ್‌ಗಾಗಿ ಮೀಸಲಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ.

ಫೈಲ್: components/SubmitButton.js

'use client'; import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton({ label }) { const { pending } = useFormStatus(); return ( {pending ? 'Processing...' : label} ); }

`aria-disabled={pending}` ಬಳಕೆಯನ್ನು ಗಮನಿಸಿ. ಇದು ಒಂದು ಪ್ರಮುಖ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಅಭ್ಯಾಸವಾಗಿದ್ದು, ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ನಿಷ್ಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು ಸರಿಯಾಗಿ ಘೋಷಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಹಂತ 3: `useFormState` ನೊಂದಿಗೆ ಮುಖ್ಯ ಫಾರ್ಮ್ ಅನ್ನು ಜೋಡಿಸುವುದು

ಈಗ, ನಮ್ಮ ಮುಖ್ಯ ಫಾರ್ಮ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ತರೋಣ. ನಮ್ಮ UI ಅನ್ನು `registerUser` ಆಕ್ಷನ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು ನಾವು `useFormState` ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ಫೈಲ್: components/RegistrationForm.js

'use client'; import { experimental_useFormState as useFormState } from 'react-dom'; import { registerUser, initialState } from '../actions/authActions'; import { SubmitButton } from './SubmitButton'; export function RegistrationForm() { const [state, formAction] = useFormState(registerUser, initialState); return (

Register

{state?.message && !state.errors &&

{state.message}

} {state?.message && state.errors &&

{state.message}

}

Username {state?.errors?.username && (

{state.errors.username[0]}

)}

Email {state?.errors?.email && (

{state.errors.email[0]}

)}

Password {state?.errors?.password && (

{state.errors.password[0]}

)}

); }

ಈ ಕಾಂಪೊನೆಂಟ್ ಈಗ ಡಿಕ್ಲರೇಟಿವ್ ಮತ್ತು ಸ್ವಚ್ಛವಾಗಿದೆ. `useFormState` ಒದಗಿಸಿದ `state` ಆಬ್ಜೆಕ್ಟ್ ಹೊರತುಪಡಿಸಿ ಇದು ಯಾವುದೇ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಅದರ ಏಕೈಕ ಕೆಲಸವೆಂದರೆ ಆ ಸ್ಥಿತಿಯ ಆಧಾರದ ಮೇಲೆ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು. ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವ ತರ್ಕವು `SubmitButton` ನಲ್ಲಿ ಅಡಕವಾಗಿದೆ, ಮತ್ತು ಎಲ್ಲಾ ವ್ಯಾಲಿಡೇಶನ್ ತರ್ಕವು `authActions.js` ನಲ್ಲಿ ವಾಸಿಸುತ್ತದೆ. ಈ ಜವಾಬ್ದಾರಿಗಳ ಪ್ರತ್ಯೇಕತೆಯು ನಿರ್ವಹಣೆಯ ದೃಷ್ಟಿಯಿಂದ ಒಂದು ದೊಡ್ಡ ಗೆಲುವು.

ಮುಂದುವರಿದ ತಂತ್ರಗಳು ಮತ್ತು ವೃತ್ತಿಪರ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಮೂಲಭೂತ ಮಾದರಿಯು ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ನೈಜ-ಪ್ರಪಂಚದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಆಗಾಗ್ಗೆ ಹೆಚ್ಚಿನ ಸೂಕ್ಷ್ಮತೆಯ ಅಗತ್ಯವಿರುತ್ತದೆ. ಕೆಲವು ಮುಂದುವರಿದ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಹೈಬ್ರಿಡ್ ವಿಧಾನ: ತತ್‌ಕ್ಷಣದ ಮತ್ತು ಸಲ್ಲಿಕೆ-ನಂತರದ ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ವಿಲೀನಗೊಳಿಸುವುದು

ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್ ಸರ್ವರ್-ಸೈಡ್ ಪರಿಶೀಲನೆಗಳಿಗೆ ಅತ್ಯುತ್ತಮವಾಗಿದೆ, ಆದರೆ ಬಳಕೆದಾರರಿಗೆ ಅವರ ಇಮೇಲ್ ಅಮಾನ್ಯವಾಗಿದೆ ಎಂದು ಹೇಳಲು ನೆಟ್‌ವರ್ಕ್ ರೌಂಡ್‌ಟ್ರಿಪ್‌ಗಾಗಿ ಕಾಯುವುದು ನಿಧಾನವಾಗಬಹುದು. ಹೈಬ್ರಿಡ್ ವಿಧಾನವು ಹೆಚ್ಚಾಗಿ ಉತ್ತಮವಾಗಿರುತ್ತದೆ:

• HTML5 ವ್ಯಾಲಿಡೇಶನ್ ಬಳಸಿ: ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮರೆಯಬೇಡಿ! `required`, `type="email"`, `minLength`, ಮತ್ತು `pattern` ನಂತಹ ಗುಣಲಕ್ಷಣಗಳು ಯಾವುದೇ ವೆಚ್ಚವಿಲ್ಲದೆ ತತ್‌ಕ್ಷಣದ, ಬ್ರೌಸರ್-ಸ್ಥಳೀಯ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ.
• ಲಘು ಕ್ಲೈಂಟ್-ಸೈಡ್ ವ್ಯಾಲಿಡೇಶನ್: ಕೇವಲ ಕಾಸ್ಮೆಟಿಕ್ ಅಥವಾ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಪರಿಶೀಲನೆಗಳಿಗಾಗಿ (ಉದಾ., ಪಾಸ್‌ವರ್ಡ್ ಸಾಮರ್ಥ್ಯ ಸೂಚಕ), ನೀವು ಇನ್ನೂ ಕನಿಷ್ಠ ಪ್ರಮಾಣದ `useState` ಮತ್ತು `onChange` ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
• ಸರ್ವರ್-ಸೈಡ್ ಅಧಿಕಾರ: ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಮಾಡಲಾಗದ ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ, ವ್ಯವಹಾರ-ತರ್ಕ ವ್ಯಾಲಿಡೇಶನ್‌ಗಾಗಿ ಸರ್ವರ್ ಆಕ್ಷನ್ ಅನ್ನು ಮೀಸಲಿಡಿ (ಉದಾ., ಅನನ್ಯ ಬಳಕೆದಾರಹೆಸರುಗಳಿಗಾಗಿ ಪರಿಶೀಲಿಸುವುದು, ಡೇಟಾಬೇಸ್ ದಾಖಲೆಗಳ ವಿರುದ್ಧ ಮೌಲ್ಯೀಕರಿಸುವುದು).

ಇದು ನಿಮಗೆ ಎರಡೂ ಲೋಕಗಳ ಅತ್ಯುತ್ತಮವಾದದ್ದನ್ನು ನೀಡುತ್ತದೆ: ಸರಳ ದೋಷಗಳಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಸಂಕೀರ್ಣ ನಿಯಮಗಳಿಗೆ ಅಧಿಕೃತ ವ್ಯಾಲಿಡೇಶನ್.

ಪ್ರವೇಶಸಾಧ್ಯತೆ (A11y): ಎಲ್ಲರಿಗಾಗಿ ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು

ಪ್ರವೇಶಸಾಧ್ಯತೆಯು ಚರ್ಚೆಗೆ ಅವಕಾಶವಿಲ್ಲದ ವಿಷಯ. ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ಈ ಅಂಶಗಳನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ:

• ದೋಷಗಳನ್ನು ಘೋಷಿಸಿ: ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ದೋಷ ಸಂದೇಶ ಕಂಟೇನರ್‌ಗಳಲ್ಲಿ `aria-live="polite"` ಅನ್ನು ಬಳಸಿದ್ದೇವೆ. ಇದು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಗೆ ದೋಷ ಸಂದೇಶವು ಕಾಣಿಸಿಕೊಂಡ ತಕ್ಷಣ ಅದನ್ನು ಘೋಷಿಸಲು ಹೇಳುತ್ತದೆ, ಬಳಕೆದಾರರ ಪ್ರಸ್ತುತ ಹರಿವನ್ನು ಅಡ್ಡಿಪಡಿಸದೆ.
• ದೋಷಗಳನ್ನು ಇನ್‌ಪುಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ: ಹೆಚ್ಚು ದೃಢವಾದ ಸಂಪರ್ಕಕ್ಕಾಗಿ, `aria-describedby` ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ. ಇನ್‌ಪುಟ್ ಅದರ ದೋಷ ಸಂದೇಶ ಕಂಟೇನರ್‌ನ ID ಯನ್ನು ಸೂಚಿಸಬಹುದು, ಇದು ಪ್ರೊಗ್ರಾಮ್ಯಾಟಿಕ್ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• ಫೋಕಸ್ ನಿರ್ವಹಣೆ: ದೋಷಗಳೊಂದಿಗೆ ಸಲ್ಲಿಕೆಯಾದ ನಂತರ, ಮೊದಲ ಅಮಾನ್ಯ ಫೀಲ್ಡ್‌ಗೆ ಪ್ರೊಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಫೋಕಸ್ ಅನ್ನು ಸರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಇದು ಬಳಕೆದಾರರು ಏನು ತಪ್ಪಾಗಿದೆ ಎಂದು ಹುಡುಕುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

`useFormStatus` ನ `data` ಪ್ರಾಪರ್ಟಿಯೊಂದಿಗೆ ಆಶಾವಾದಿ UI

ಒಂದು ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅಲ್ಲಿ ಬಳಕೆದಾರರು ಕಾಮೆಂಟ್ ಅನ್ನು ಪೋಸ್ಟ್ ಮಾಡುತ್ತಾರೆ. ಒಂದು ಸೆಕೆಂಡಿಗೆ ಸ್ಪಿನ್ನರ್ ತೋರಿಸುವ ಬದಲು, ನೀವು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ತತ್‌ಕ್ಷಣವೆಂದು ಭಾಸವಾಗುವಂತೆ ಮಾಡಬಹುದು. `useFormStatus` ನಿಂದ `data` ಪ್ರಾಪರ್ಟಿಯು ಇದಕ್ಕಾಗಿ ಪರಿಪೂರ್ಣವಾಗಿದೆ.

ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿದಾಗ, `pending` `true` ಆಗುತ್ತದೆ ಮತ್ತು `data` ಸಲ್ಲಿಕೆಯ `FormData` ಯೊಂದಿಗೆ ಜನಪ್ರಿಯವಾಗುತ್ತದೆ. ನೀವು ಈ `data` ಅನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ಕಾಮೆಂಟ್ ಅನ್ನು ತಕ್ಷಣವೇ ತಾತ್ಕಾಲಿಕ, 'ಪೆಂಡಿಂಗ್' ದೃಶ್ಯ ಸ್ಥಿತಿಯಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಬಹುದು. ಸರ್ವರ್ ಆಕ್ಷನ್ ಯಶಸ್ವಿಯಾದರೆ, ನೀವು ಪೆಂಡಿಂಗ್ ಕಾಮೆಂಟ್ ಅನ್ನು ಸರ್ವರ್‌ನಿಂದ ಅಂತಿಮ ಡೇಟಾದೊಂದಿಗೆ ಬದಲಾಯಿಸುತ್ತೀರಿ. ಅದು ವಿಫಲವಾದರೆ, ನೀವು ಪೆಂಡಿಂಗ್ ಕಾಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ ದೋಷವನ್ನು ತೋರಿಸಬಹುದು. ಇದು ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಂಬಲಾಗದಷ್ಟು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.

"ಪ್ರಾಯೋಗಿಕ" ನೀರನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು

`experimental_useFormStatus` ಮತ್ತು `experimental_useFormState` ನಲ್ಲಿನ "ಪ್ರಾಯೋಗಿಕ" ಪೂರ್ವಪ್ರತ್ಯಯವನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

"ಪ್ರಾಯೋಗಿಕ" ಎಂದರೆ ನಿಜವಾಗಿಯೂ ಏನು

ರಿಯಾಕ್ಟ್ ಒಂದು API ಅನ್ನು ಪ್ರಾಯೋಗಿಕ ಎಂದು ಲೇಬಲ್ ಮಾಡಿದಾಗ, ಇದರರ್ಥ:

• API ಬದಲಾಗಬಹುದು: ಹೆಸರು, ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳು, ಅಥವಾ ರಿಟರ್ನ್ ಮೌಲ್ಯಗಳು ಭವಿಷ್ಯದ ರಿಯಾಕ್ಟ್ ಬಿಡುಗಡೆಯಲ್ಲಿ ಪ್ರಮಾಣಿತ ಸೆಮ್ಯಾಂಟಿಕ್ ಆವೃತ್ತಿಯನ್ನು (SemVer) ಅನುಸರಿಸದೆ ಬದಲಾಯಿಸಬಹುದು.
• ಬಗ್‌ಗಳು ಇರಬಹುದು: ಹೊಸ ವೈಶಿಷ್ಟ್ಯವಾಗಿ, ಇದು ಇನ್ನೂ ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥವಾಗದ ಅಥವಾ ಪರಿಹರಿಸದ ಎಡ್ಜ್ ಕೇಸ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು.
• ದಾಖಲಾತಿಗಳು ವಿರಳವಾಗಿರಬಹುದು: ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ದಾಖಲಿಸಿದ್ದರೂ, ಮುಂದುವರಿದ ಮಾದರಿಗಳ ಕುರಿತ ವಿವರವಾದ ಮಾರ್ಗದರ್ಶಿಗಳು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿರಬಹುದು.

ಯಾವಾಗ ಅಳವಡಿಸಿಕೊಳ್ಳಬೇಕು ಮತ್ತು ಯಾವಾಗ ಕಾಯಬೇಕು

ಹಾಗಾದರೆ, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ನೀವು ಇದನ್ನು ಬಳಸಬೇಕೇ? ಉತ್ತರವು ನಿಮ್ಮ ಸಂದರ್ಭವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ:

• ಇದಕ್ಕಾಗಿ ಉತ್ತಮ: ವೈಯಕ್ತಿಕ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು, ಆಂತರಿಕ ಪರಿಕರಗಳು, ಸ್ಟಾರ್ಟ್‌ಅಪ್‌ಗಳು, ಅಥವಾ ಸಂಭಾವ್ಯ API ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುಕೂಲಕರವಾಗಿರುವ ತಂಡಗಳು. Next.js (ತನ್ನ ಆಪ್ ರೂಟರ್‌ನಲ್ಲಿ ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಂಯೋಜಿಸಿದೆ) ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನಲ್ಲಿ ಇದನ್ನು ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಸುರಕ್ಷಿತ ಪಂತವಾಗಿದೆ, ಏಕೆಂದರೆ ಫ್ರೇಮ್‌ವರ್ಕ್ ಕೆಲವು ಬದಲಾವಣೆಗಳನ್ನು ಅಮೂರ್ತಗೊಳಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಇದರೊಂದಿಗೆ ಎಚ್ಚರಿಕೆ ವಹಿಸಿ: ದೊಡ್ಡ ಪ್ರಮಾಣದ ಎಂಟರ್‌ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಮಿಷನ್-ಕ್ರಿಟಿಕಲ್ ಸಿಸ್ಟಮ್‌ಗಳು, ಅಥವಾ API ಸ್ಥಿರತೆಯು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿರುವ ದೀರ್ಘಕಾಲೀನ ನಿರ್ವಹಣಾ ಒಪ್ಪಂದಗಳಿರುವ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಹುಕ್‌ಗಳು ಸ್ಥಿರ API ಗೆ ಬಡ್ತಿ ಪಡೆಯುವವರೆಗೆ ಕಾಯುವುದು ವಿವೇಕಯುತವಾಗಬಹುದು.

ಈ ಹುಕ್‌ಗಳ ಸ್ಥಿರೀಕರಣದ ಕುರಿತಾದ ಪ್ರಕಟಣೆಗಳಿಗಾಗಿ ಯಾವಾಗಲೂ ಅಧಿಕೃತ ರಿಯಾಕ್ಟ್ ಬ್ಲಾಗ್ ಮತ್ತು ದಾಖಲಾತಿಗಳ ಮೇಲೆ ಕಣ್ಣಿಡಿ.

ತೀರ್ಮಾನ: ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳ ಭವಿಷ್ಯ

`experimental_useFormStatus` ಮತ್ತು ಅದರ ಸಂಬಂಧಿತ API ಗಳ ಪರಿಚಯವು ಕೇವಲ ಒಂದು ಹೊಸ ಸಾಧನಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿದೆ; ಇದು ನಾವು ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುತ್ತೇವೆ ಎಂಬುದರಲ್ಲಿ ಒಂದು ತಾತ್ವಿಕ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ನ ಅಡಿಪಾಯಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಮತ್ತು ಸರ್ವರ್‌ನಲ್ಲಿ ಸ್ಟೇಟ್‌ಫುಲ್ ತರ್ಕವನ್ನು ಸಹ-ಸ್ಥಾಪಿಸುವ ಮೂಲಕ, ನಾವು ಸರಳ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಮತ್ತು ಆಗಾಗ್ಗೆ ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.

ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಜೀವನಚಕ್ರಕ್ಕೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಪ್ರತಿಕ್ರಿಯಿಸಲು `useFormStatus` ಹೇಗೆ ಒಂದು ಸ್ವಚ್ಛ, ಡಿಕಪಲ್ಡ್ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ನೋಡಿದ್ದೇವೆ. ಇದು ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿಗಳಿಗಾಗಿ ಪ್ರಾಪ್ ಡ್ರಿಲ್ಲಿಂಗ್ ಅನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ಸ್ಮಾರ್ಟ್ `SubmitButton` ನಂತಹ ಸೊಗಸಾದ, ಸ್ವಯಂಪೂರ್ಣ UI ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. `useFormState` ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ, ಇದು ಸ್ಟೇಟಸ್-ಆಧಾರಿತ ವ್ಯಾಲಿಡೇಶನ್‌ನ ಶಕ್ತಿಯುತ ಮಾದರಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ, ಅಲ್ಲಿ ಸರ್ವರ್ ಅಂತಿಮ ಅಧಿಕಾರವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಕ್ಲೈಂಟ್‌ನ ಮುಖ್ಯ ಜವಾಬ್ದಾರಿಯು ಸರ್ವರ್ ಆಕ್ಷನ್‌ನಿಂದ ಹಿಂತಿರುಗಿದ ಸ್ಥಿತಿಯನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಾಗಿದೆ.

"ಪ್ರಾಯೋಗಿಕ" ಟ್ಯಾಗ್ ಒಂದು ಮಟ್ಟಿಗೆ ಎಚ್ಚರಿಕೆಯನ್ನು ಬಯಸುತ್ತದೆಯಾದರೂ, ದಿಕ್ಕು ಸ್ಪಷ್ಟವಾಗಿದೆ. ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳ ಭವಿಷ್ಯವು ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆ, ಸರಳೀಕೃತ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್, ಮತ್ತು ಕ್ಲೈಂಟ್ ಹಾಗೂ ಸರ್ವರ್ ತರ್ಕದ ನಡುವೆ ಒಂದು ಶಕ್ತಿಯುತ, ತಡೆರಹಿತ ಏಕೀಕರಣದ್ದಾಗಿದೆ. ಇಂದು ಈ ಹೊಸ ಹುಕ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಕೇವಲ ಹೊಸ API ಅನ್ನು ಕಲಿಯುತ್ತಿಲ್ಲ; ನೀವು ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿಯ ಮುಂದಿನ ಪೀಳಿಗೆಗೆ ಸಿದ್ಧರಾಗುತ್ತಿದ್ದೀರಿ.